import { Charts, FullScreenContainer, ScrollBoard } from '@jiaminghi/data-view-react';
import React from 'react';
import style from './index.less';

const Home: React.FC = () => {
  const config = {
    header: ['列1', '列2', '列3'],
    data: [
      ['行1列1', '行1列2', '行1列3'],
      ['行2列1', '行2列2', '行2列3'],
      ['行3列1', '行3列2', '行3列3'],
      ['行4列1', '行4列2', '行4列3'],
      ['行5列1', '行5列2', '行5列3'],
      ['行6列1', '行6列2', '行6列3'],
      ['行7列1', '行7列2', '行7列3'],
      ['行8列1', '行8列2', '行8列3'],
      ['行9列1', '行9列2', '行9列3'],
      ['行10列1', '行10列2', '行10列3'],
    ],
    index: true,
    columnWidth: [50],
    align: ['center'],
  };

  const option = {
    title: {
      text: '周销售额趋势',
    },
    xAxis: {
      name: '第二周',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    },
    yAxis: {
      name: '销售额',
      data: 'value',
    },
    series: [
      {
        data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
        type: 'line',
        lineArea: {
          show: true,
          gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)'],
        },
      },
    ],
  };

  return (
    <>
      <FullScreenContainer className={style.fullScreen}>
        {/* < BorderBox1>BorderBox1</BorderBox1> */}
        <div className={style.wp}>
          <ScrollBoard config={config} style={{ width: '500px', height: '220px' }} />
          <Charts className={style.line1} option={option} />
        </div>
      </FullScreenContainer>
    </>
  );
};

export default Home;
